<#escape x as x?html>
<form class="form-horizontal form-fusion" name="recordForm" id="recordForm" method="post" action="${actionType!}">
    <input type="text" class="hide"
           name="id" value="${(record.id)!}">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="code"><@s.message "base.role.modal.code"/></label>
        <div class="col-sm-9">
            <input type="text" class="form-control"
                   name="code" placeholder="<@s.message "base.role.modal.code"/>"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.code)!}">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="name"><@s.message "base.role.modal.name"/></label>
        <div class="col-sm-9">
            <input type="text" class="form-control"
                   name="name" placeholder="<@s.message "base.role.modal.name"/>"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.name)!}">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="permissionIds"><@s.message "base.role.modal.permission"/></label>
        <div class="col-sm-9">
            <input type="text" class="hide"
                   name="permissionIds" placeholder="<@s.message "base.role.modal.permission"/>"
                   value="${(record.permissionIds)!}">
            <div class="permission-tree fancytree-form"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="state"><@s.message "enum.state"/></label>
        <div class="col-sm-9">
            <select class="form-control" data-dict="state" data-value="${(record.state)!}"
                    name="state">
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="email"><@s.message "base.role.modal.remark"/></label>
        <div class="col-sm-9">
            <input type="text" class="form-control"
                   name="remark" placeholder="<@s.message "base.role.modal.remark"/>"
                   value="${(record.remark)!}">
        </div>
    </div>
</form>
<script>
    context.call([
        "core",
        "scanSelect",
        "jQueryFancyTree"
    ], function (core, scanSelect) {
        scanSelect.initSelect();
        var id = $("input[name='id']").val();
        if (id == "") id = 0;
        $(".permission-tree").fancytree({
            checkbox: true,
            selectMode: 3,
            minExpandLevel:3,
            source: {
                url: core.getUrl("/base/permission/rest/selectedTree/" + id),
                debugDelay: 100
            },
            icon: function (event, data) {
                if(core.isEmpty(data.node.children)){
                    return "fa fa-cog";
                } else {
                    return "fa fa-cogs";
                }
            },
            select: function (event, data) {
                // Get a list of all selected nodes, and convert to a key array:
                var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {
                    var ret = node.key;
                    var parent = node.parent;
                    while (parent && parent.key.indexOf("root") < 0) {
                        ret += "," + parent.key;
                        parent = parent.parent;
                    }
                    return ret;
                });

                $("input[name='permissionIds']").val(selKeys);
            }
        });

        if ($("#recordForm").attr("action") == "view")  $(".permission-tree").fancytree("disable");
    })
</script>
</#escape>